<template>
  <div class="dashboard-editor-container">
    <!-- 搜索条件 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px" v-if="$store.getters && $store.getters.admin">
      <el-form-item label="店铺ID" prop="shopId" >
        <el-input
          v-model="shopId"
          placeholder="请输入店铺ID"
          clearable
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>


    <panel-group @handleSetLineChartData="handleSetLineChartData" :info="info"/>
    <el-button-group>
      <el-button v-for="(v, i) in dayList" :type="dayIndex === i ? 'primary' : 'default'" @click="handleDay(v, i)">{{ v.title }}</el-button>
    </el-button-group>
    <el-row class="white-bg pd15" style="">
      <el-col :xs="12" :sm="12" :lg="12" class="white-bg">
        <line-chart :chart-data="customerUserCountDaily" :xAxis="xAxis" :charTitle="'最近' + day + '天用户数量数据统计' " :chatColor="'#40c9c6'"/>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="white-bg">
        <line-chart :chart-data="orderGoodsCountDaily" :xAxis="xAxis" :charTitle="'最近' + day + '天订单数量数据统计' " :chatColor="'#bfb634'" />
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="white-bg" v-hasPermi="['web:index:amount']">
        <line-chart :chart-data="orderGoodsAmountDaily" :xAxis="xAxis" :charTitle="'最近' + day + '天交易金额数据统计' " :chatColor="'#f4516c'" />
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="white-bg" v-hasPermi="['web:index:amount']">
        <line-chart :chart-data="orderGiftAmountDaily" :xAxis="xAxis" :charTitle="'最近' + day + '天打赏金额数据统计' " :chatColor="'#36a3f7'" />
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getUnionStaticList } from "@/api/union/static";
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
  },
  data() {
    return {
      info: {
        customerUserCountTotal: 0,
        orderGiftAmountTotal: 0,
        orderGiftCountTotal: 0,
        orderGoodsAmountTotal: 0,
        orderGoodsCountTotal: 0,
        customerUserCountToday: 0,
        orderGiftAmountToday: 0,
        orderGiftCountToday: 0,
        orderGoodsAmountToday: 0,
        orderGoodsCountToday: 0,
      },
      xAxis: [],

      customerUserCountDaily: {
        expectedData: []
      },
      orderGiftCountDaily: {
        expectedData: []
      },
      orderGiftAmountDaily: {
        expectedData: []
      },
      orderGoodsCountDaily: {
        expectedData: []
      },
      orderGoodsAmountDaily: {
        expectedData: []
      },
      day: 7,
      // 查询参数
      queryParams: {
        shopId: undefined,
      },
      shopId: undefined,
      dayIndex: 0,
      dayList: [{title: '最近7天', value: 7}, {title: '最近1个月', value: 30}, {title: '最近1年', value: 365}]
    }
  },
  created() {
    this.getList();
  },
  methods: {
    handleDay(v, i){
      this.dayIndex = i;
      this.day = v.value;
      this.getList()
    },
    handleSetLineChartData(type) {
      Object.assign(this.$data, this.$options.data.call(this));
      this.getList();
    },
    /** 查询数据 */
    getList() {
      this.xAxis = [];
      for (let i = 0; i < this.day; i++) {
        let date = new Date();
        date.setDate(date.getDate() - i);
        this.xAxis.unshift(date.toISOString().split('T')[0]);
      }
      let params = {
        day: this.day
      }
      if (this.$route.query.shopId) {
        params.shopId = this.$route.query.shopId
      }
      if (this.queryParams.shopId) {
        params.shopId = this.queryParams.shopId
      }
      getUnionStaticList(params).then(response => {
        const date = new Date();
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const todayDate = `${year}-${month}-${day}`;
        this.customerUserCountDaily.expectedData = []
        this.orderGiftCountDaily.expectedData = []
        this.orderGiftAmountDaily.expectedData = []
        this.orderGoodsCountDaily.expectedData = []
        this.orderGoodsAmountDaily.expectedData = []
        this.info.customerUserCountTotal = response.customerUserCountTotal
        this.info.orderGiftAmountTotal = response.orderGiftAmountTotal
        this.info.orderGiftCountTotal = response.orderGiftCountTotal
        this.info.orderGoodsAmountTotal = response.orderGoodsAmountTotal
        this.info.orderGoodsCountTotal = response.orderGoodsCountTotal
        debugger;
        if(response.customerUserCountDaily.length > 0 && response.customerUserCountDaily[response.customerUserCountDaily.length-1].date === todayDate){
          this.info.customerUserCountToday = response.customerUserCountDaily[response.customerUserCountDaily.length-1].sum ? response.customerUserCountDaily[response.customerUserCountDaily.length-1].sum : 0
        }
        if(response.orderGiftCountDaily.length > 0 && response.orderGiftCountDaily[response.orderGiftCountDaily.length-1].date === todayDate){
          this.info.orderGiftCountToday = response.orderGiftCountDaily[response.orderGiftCountDaily.length-1].sum ? response.orderGiftCountDaily[response.orderGiftCountDaily.length-1].sum : 0
        }
        if(response.orderGiftAmountDaily.length > 0 && response.orderGiftAmountDaily[response.orderGiftAmountDaily.length-1].date === todayDate){
          this.info.orderGiftAmountToday = response.orderGiftAmountDaily[response.orderGiftAmountDaily.length-1].sum ? response.orderGiftAmountDaily[response.orderGiftAmountDaily.length-1].sum : 0
        }
        if(response.orderGoodsAmountDaily.length > 0 && response.orderGoodsAmountDaily[response.orderGoodsAmountDaily.length-1].date === todayDate){
          this.info.orderGoodsAmountToday = response.orderGoodsAmountDaily[response.orderGoodsAmountDaily.length-1].sum ? response.orderGoodsAmountDaily[response.orderGoodsAmountDaily.length-1].sum : 0
        }
        if(response.orderGoodsCountDaily.length > 0 && response.orderGoodsCountDaily[response.orderGoodsCountDaily.length-1].date === todayDate){
          this.info.orderGoodsCountToday = response.orderGoodsCountDaily[response.orderGoodsCountDaily.length-1].sum ? response.orderGoodsCountDaily[response.orderGoodsCountDaily.length-1].sum : 0
        }
        this.xAxis.forEach((e,i) => {
          this.customerUserCountDaily.expectedData.push(0)
          this.orderGiftCountDaily.expectedData.push(0)
          this.orderGiftAmountDaily.expectedData.push(0)
          this.orderGoodsCountDaily.expectedData.push(0)
          this.orderGoodsAmountDaily.expectedData.push(0)
          if(response.customerUserCountDaily.length > 0){
            response.customerUserCountDaily.forEach(v=>{
              if(e === v.date){
                this.customerUserCountDaily.expectedData[i] = v.sum ? v.sum : 0
              }
            })
          }
          if(response.orderGiftCountDaily.length > 0){
            response.orderGiftCountDaily.forEach(v=>{
              if(e === v.date){
                this.orderGiftCountDaily.expectedData[i] = v.sum ? v.sum : 0
              }
            })
          }
          if(response.orderGiftAmountDaily.length > 0){
            response.orderGiftAmountDaily.forEach(v=>{
              if(e === v.date){
                this.orderGiftAmountDaily.expectedData[i] = v.sum ? v.sum : 0
              }
            })
          }
          if(response.orderGoodsCountDaily.length > 0){
            response.orderGoodsCountDaily.forEach(v=>{
              if(e === v.date){
                this.orderGoodsCountDaily.expectedData[i] = v.sum ? v.sum : 0
              }
            })
          }
          if(response.orderGoodsAmountDaily.length > 0){
            response.orderGoodsAmountDaily.forEach(v=>{
              if(e === v.date){
                this.orderGoodsAmountDaily.expectedData[i] = v.sum ? v.sum : 0
              }
            })
          }
        });
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
